<template>
  <div class="mu-detail-box">
    <!-- 表格 -->
    <el-form>
      <el-form-item label="签约编号">
        <span>{{ formData._id }}</span>
      </el-form-item>
      <el-form-item label=" 签约状态">
        <span :style="{ color: signStatesData[formData.state]?.color }" style="font-weight: 600; font-size: 16px;">
          {{ signStatesData[formData.state]?.label }}{{ formData.reason ? '，' + formData.reason : '' }}
        </span>
      </el-form-item>
      <el-form-item label="签约机构">
        <span>{{ formData.organizationId?.name }}</span>
      </el-form-item>
      <el-form-item label="签约团队">
        <span>{{ formData.teamId?.name }}</span>
      </el-form-item>
      <el-form-item label="签约医生">
        <span>{{ formData.doctorId?.name }}</span>
      </el-form-item>
      <el-form-item label="服务包">
        <span>{{ formData.servicePackId?.name }}</span>
      </el-form-item>
      <el-form-item label="签约类型">
        <span>首次签约</span>
      </el-form-item>
      <el-form-item label="签约周期">
        <span>1年</span>
      </el-form-item>
      <el-form-item label="费用">
        <span>￥{{ formData.servicePackId?.price }}</span>
      </el-form-item>
      <el-form-item label="申请时间">
        <span>{{ formData.applyTime }}</span>
      </el-form-item>
      <el-form-item label="生效日期">
        <span>{{ formData.effectiveDate }}</span>
      </el-form-item>
    </el-form>
    <el-form-item label="签约备注">
      <span>{{ formData.remark }}</span>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { useFindData } from '@/composables/findData';

defineProps(['formData']);

const { signStatesData } = useFindData();

</script>

<style scoped lang="scss">
.mu-detail-box {

  // 去掉 label 左外边距
  :deep(.el-form-item__label-wrap) {
    margin-left: 0 !important;
  }

  .el-form {
    display: grid;
    grid-template-columns: repeat(4, 340px);
    grid-template-rows: repeat(2, 50px);
    justify-content: space-between;
  }
}
</style>